<template>
	<view :style="{ paddingBottom: 10 + 'px' , paddingTop: topHight + 10 + 'px' }">
		<!-- 顶部名字 -->
		<view class="center size30 font700 col3 minbottom10">
			求租/求购
		</view>
		<!-- 顶部名字 -->
		<!-- 顶部选择 -->
		<view class="row min30">
			<view class="col0 size26 font500 row minau" @tap="addshow = true">
				{{ add }}
				<u-icon name="arrow-down-fill" color="#5C5C5C" size="16"></u-icon>
			</view>
			<view class=" col0 size26 font500 row minau" @tap="categoryshow = true">
				{{ category }}
				<u-icon name="arrow-down-fill" color="#5C5C5C" size="16"></u-icon>
			</view>
			<view class="col0 size26 font500 row minau">
				最近更新
			</view>
		</view>
		<!-- 顶部选择 -->
		<!-- 联系官方 -->
		<!-- <view class="pad20 size26 font500 row" style="color: #FF7A00;background: #FFF3C9;justify-content: center;">
			找不到合适的资源，点击为您联系官方寻找
			<u-icon name="phone-fill" color="#FF7A00" size="18"></u-icon>
		</view> -->
		<!-- 联系官方 -->
		<!-- 列表 -->
		<view class="empty" style="margin-top: 300rpx;" v-if="list.length == 0">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
		<view class="min30_rl mintop30" v-else>
			<view v-for="(item,index) in list">
				<view class="rad2 minbottom30 row"
					style="background-color: #fff;box-shadow: 1rpx 1rpx 8rpx 2rpx rgba(206,188,172,0.24);height: 240rpx;">
					<view class="" v-if="item.type == 1"
						style="background-color: #169E00;width: 20%;height: 55%;clip-path: polygon(50% 0%, 100% 0%, 0% 100%, 0% 50%);">
						<view class="size26 colf font500 mintop10 minleft10" style="transform: rotate(-45deg)">
							求购
						</view>
					</view>
					<view class="" v-else
						style="background-color: #FAB029;width: 20%;height: 55%;clip-path: polygon(50% 0%, 100% 0%, 0% 100%, 0% 50%);">
						<view class="size26 colf font500 mintop10 minleft10" style="transform: rotate(-45deg)">
							求租
						</view>
					</view>
					<view class="column" style="padding: 20rpx 20rpx 20rpx 0;width: 80%;">
						<view class="row">
							<view class="font700 size30 col0 omit1" style="align-items: flex-end;max-width: 380rpx;">
								{{ item.title }}
							</view>
							<view class="minau minright0 size26 col6 font500">
								{{ $com.format(item.create_time, 'yyyy-MM-dd') }}
							</view>
						</view>
						<view class="minto minbottom0 row">
							<view class="column" style="width: 64%;">
								<view class="row size26 font500 align minbottom16" style="color: #808080;">
									{{ item.type == 1 ? '求购类型：' : '求租类型：' }}{{ item.appletCategory.title }}
								</view>
								<view class="row size24 font500 align minbottom16" style="color: #808080;">
									{{ item.type == 1 ? '求购数量：' : '求租面积：' }}{{ item.area }}
								</view>
								<view class="row size24 font500 align omit1" style="color: #808080;width: 100%;">
									{{ item.type == 1 ? '求购发货地：' : '求租地址：' }}{{ item.address_text }}
								</view>
							</view>
							<view class="minauto minright0 rad4 font600 size28" @click="call(item)"
								style="padding: 18rpx 40rpx;color: #B26E00;background: linear-gradient( 180deg, #FFF9ED 0%, #FFDC9D 100%);">
								我要报价
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 50rpx;"><u-loadmore :status="status" /></view>
		</view>
		<!-- 列表 -->
		<!-- 类目选择器 -->
		<u-picker :show="categoryshow" keyName="title" :columns="columns" @confirm="categoryConfirm"
			@cancel="categoryCancel"></u-picker>
		<!-- 类目选择器 -->
		<!-- 省县区选择器 -->
		<u-picker :show="addshow" ref="uPicker" keyName="name" :columns="addlist" @confirm="addConfirm"
			@cancel="addCancel" @change="changeHandler"></u-picker>
		<!-- 省县区选择器 -->
		<!-- 发布按钮 -->
		<view class="posfix zin2" style="right: 2rpx;" :style="{ bottom: bottom + 'px' }"
			@click="$jump.nav('/releasepackage/sell_release')">
			<image src="@/static/index/release.png" class="posfix zin-1" style="width: 120rpx;height: 120rpx;"></image>
			<view class="column center size22 font500 pad10" style="color: #674000;">
				<view class="">
					发布
				</view>
				<view class="">
					出租/出售
				</view>
			</view>
		</view>
		<!-- 发布按钮 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topHight: '',
				bottom: '',
				address_id: '',
				classify_id: '',
				user_id: '',
				page: 1,
				status: 'loadmore',
				loadmore: [],
				add: '选择区域',
				category: '类目',
				addshow: false,
				categoryshow: false,
				columns: [],
				addlist: [],
				columnsList: [],
				list: []
			}
		},
		onLoad() {
			this.getBuyList()
			this.getCategory()
			this.getAreaList()
			let app = uni.getSystemInfoSync()
			this.topHight = app.statusBarHeight
			// #ifdef MP-TOUTIAO
			this.topHight = 5
			// #endif
			var safeAreaInsetsbottom = app.safeAreaInsets.bottom
			if (safeAreaInsetsbottom == 0) {
				// #ifdef H5
				this.bottom = 110
				// #endif
				// #ifdef MP-WEIXIN
				this.bottom = 50
				// #endif
				// #ifdef MP-TOUTIAO
				this.bottom = 60
				// #endif
			} else {
				this.bottom = 50
			}
		},
		onShow() {
			this.user_id = uni.getStorageSync('user_id');
			//当前页面展示的时候他就执行该生命周期
			this.getBuyList()
			this.getCategory()
			this.getAreaList()
		},
		onReachBottom() {
			if (this.page < 0) return;
			this.status = 'loading';
			this.page = ++this.page
			this.getBuyList()
			setTimeout(() => {
				console.log(this.loadmore);
				if (this.loadmore.length == 0) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		methods: {
			async getBuyList() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletAsking/UserAskingList", {
					Category: this.classify_id,
					addresses: this.address_id,
					page: this.page
				})
				if (code == 1) {
					if (this.page != 1) {
						this.loadmore = data.items
						for (var i = 0; i < data.items.length; i++) {
							this.list.push(data.items[i]); // 加载的数据追加在上一页后面
						}
					} else {
						this.loadmore = data.items
						this.list = data.items
					}
				} else {
					console.log(msg);
				}
			},
			async getCategory() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletAsking/CategoryList")
				if (code == 1) {
					this.columns = [data]
				} else {
					console.log(msg);
				}
			},

			async getAreaList() {
				let departmentColumns = [] //部门岗位数据
				let originalColumns = [] //默认的子数据
				let thirdData = []
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletAsking/AreaList")
				if (code == 1) {
					this.columnsList = data //选择数据
					//初始数据
					departmentColumns = data
					if (data[0].children == null) {
						originalColumns = []
					} else {
						originalColumns = data[0].children //第一层下面的第二层数据
					}
					if (originalColumns[0].children == null) {
						thirdData = []
					} else {
						thirdData = originalColumns[0].children //第二层下面的第三层数据
					}
					this.addlist = [departmentColumns, originalColumns, thirdData]
				} else {
					console.log(msg);
				}
			},
			async getCall(item) {
				console.log(item);
				let {
					code,
					msg,
					data
				} = await this.$com.fetch("AppletAsking/contacted", {
					goods_id: item.id,
					user_id: this.user_id,
					title: item.title,
					cover: '',
					classify_name: item.appletCategory.title,
					type: item.type == 0 ? '求租' : '求购',
					price: item.price,
					age: '',
					acres: item.area,
					address: item.address_text,
					is_type: 4
				})
				if (code == 1) {
					// this.$com.toast(msg)
				} else {
					// this.$com.toast(msg)
				}
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					let items = this.columnsList[index].children.map((e) => {
						return e
					})
					picker.setColumnValues(1, items)
					items = this.columnsList[index].children[0].children.map((e) => {
						return e
					})
					picker.setColumnValues(2, items)
				}
				if (columnIndex === 1) {
					let items = this.columnsList[indexs[0]].children[index].children.map(
						(e) => {
							return e
						})
					picker.setColumnValues(2, items)
				}
			},
			call(item) {
				var _this = this
				if (_this.user_id) {

					uni.makePhoneCall({
						phoneNumber: item.admin_phone,
						success() {
							console.log('拨打成功了');
							_this.getCall(item)
						},
						fail() {
							console.log('拨打失败了');
						}
					})
				} else {
					_this.$com.toast('您还未登录，正在前往登录')
					setTimeout(function() {
						_this.$jump.nav('/mypackage/sign')
					}, 1000)
				}

			},
			addCancel() {
				this.add = '选择区域'
				this.address_id = ''
				this.page = 1
				if (!this.address_id) {
					this.getBuyList()
				}
				this.addshow = false
			},
			addConfirm(e) {
				var addarr = []
				e.value.map((e) => {
					addarr.push(e.id)
				})
				this.address_id = addarr.toString()
				this.add = e.value[2].name
				console.log(this.address_id)
				this.page = 1
				this.getBuyList()
				this.addshow = false
			},
			categoryCancel() {
				this.category = '类目'
				this.classify_id = ''
				this.page = 1
				this.getBuyList()
				this.categoryshow = false
			},
			categoryConfirm(e) {
				this.category = e.value[0].title
				this.classify_id = e.value[0].id
				this.page = 1
				this.getBuyList()
				this.categoryshow = false
			},
		}
	}
</script>

<style>
	page {
		background: linear-gradient(180deg, #FFF4D3 10%, #FFFFFF 30%);
		background-repeat: no-repeat;
	}
</style>

<style scoped lang="less">
	.minbottom16 {
		margin-bottom: 16rpx;
	}
</style>